<template>
  <div class="block">
    <el-pagination @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                   :current-page="currentPage4"
                   :page-sizes="[1, 5, 8, 10, 15, 20, 30, 50, 100, 200]"
                   :page-size="15"
                   layout="prev, pager, next, total, jumper, sizes"
                   :total="msg"
                   :prev-text="prevText"
                   :next-text="nextText"
                   class="page-paging"></el-pagination>
  </div>
</template>
<script>
export default {
  data () {
    return {
      prevText: '< 前一页',
      nextText: '后一页 >',
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 1
    }
  },
  mounted () {
    // this.addTextNode()
  },
  props: ['msg'],
  methods: {
    sliceArray (array, size, id) { // 分割数组
      let result = []
      for (let x = 0; x < Math.ceil(array.length / size); x++) {
        let start = x * size
        let end = start + size
        result.push(array.slice(start, end))
      }
      return result[id]
    },
    handleSizeChange (val) {
      // console.log(`每页 ${val} 条`)
      this.$emit('pageNum', val)
    },
    handleCurrentChange (val) {
      // console.log(`当前页: ${val}`)
      this.$emit('pageId', val)
    }
    // addTextNode () {
    //   // 创建span标签加文本节点
    //   let textSpan = document.createElement('span')
    //   let elText = document.createTextNode('每页')
    //   textSpan.appendChild(elText)
    //   // 放在input前面
    //   let elPag = document.getElementsByClassName('el-pagination')[0]
    //   let val = document.getElementsByClassName('el-pagination__sizes')[0]
    //   elPag.insertBefore(textSpan, val)
    //   // span添加样式
    //   textSpan.className = 'el-pagination__jump'
    // }
  }
}
</script>
<style lang="scss" scoped>
.block {
  width: 100%;
}
/deep/ .el-pagination {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  height: 30px;
  padding: 10px 0;
  .el-pager {
    li {
      padding: 0;
      color: #666;
      background-color: #f5f5f5;
      margin: 0 5px !important;
      &:hover {
        background-color: #d2d2d2;
      }
    }
    .active {
      background-color: #d2d2d2;
    }
  }
  .btn-prev,
  .btn-next {
    color: #666;
    background-color: #f5f5f5;
    &:hover {
      background-color: #d2d2d2;
    }
  }
  .el-pagination__total {
    margin-left: 20px;
    font-size: 12px;
  }
}
</style>
